<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page language="java" contentType="text/html;  charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko" ng-app="ionicApp">
	<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <title>설정</title>
    <link href="/resources/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="/resources/css/font-awesome.css">
    <link rel="stylesheet" href="/resources/css/ionicons.min.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
    <style type="text/css">
    
    	body {
    		background-color: #f8f8f8;
    		overflow-x: hidden;
		}
		.list-menu{ padding:0; list-style:none;margin-top:30px;}
		.list-menu > li { border-bottom:1px solid #ddd; width:100%; height:100%; display:block; padding:12px 12px; position:relative; cursor:pointer; background-color:#fff; white-space:nowrap; }
		.list-menu > li:first-child {border-top:1px solid #ddd;}
		.list-title{border:0;background-color:#f8f8f8!important;font-weight:bold;border-top:0!important;}
		.arrow-right{ position:absolute;right:12px;top:9px;font-size:22px;color:#888; }
		.value-right{ position:absolute;right:30px;top:12px;color:#888; }
		.value-empty-right{ position:absolute;right:12px;top:12px;color:#888; }
		.input-value{ margin-left:20px; border:0; outline:none; color:#017AFC; width:80%; }
		.radio-check{ position:absolute;right:10px;top:10px;font-size:20px;display:none; color:#666; }
		.list-menu > li.check .radio-check {display:block;}
    	#topmenu li a:hover,
    	#topmenu li a:focus{
    		background-color:#F6F7F8;
    	}
    	#topmenu .active a,
    	#topmenu .active a:hover,
    	#topmenu .active a:focus{
    		background-color:#F6F7F8;
    	}
    	
    	#topmenu li a{
    		text-decoration:none;
    		text-align:left;
    		display: block;
    		padding: 14px 0 14px 10px;
    		border-bottom: 1px #DBDBDB solid;
    	}
    	#topmenu li:last-child a{
    		border-bottom: 0;
    	}
    	   	
    	#topmenu li.active,
    	#topmenu li.active a,
    	#topmenu li.active a *{
    		background-color:#F6F7F8;
    	}

    	.subLayout{
    		width:100%;
    		position: absolute;
    		background-color: #f8f8f8;
    		top:0;
    		left:0;
    		padding-top:44px;
    		-webkit-transform: translate(100%,0);
    		transform: translate(100%,0);
			-webkit-transition:all 0.3s ease-in-out;
			-moz-transition:all 0.3s ease-in-out;
			-o-transition:all 0.3s ease-in-out;
			transition:all 0.3s ease-in-out;
			z-index:100;    		
    	}
    	.subLayout:after{
    		content: '';
    		
    	}
    	.tabMenu{
    		margin:0;
    		padding-bottom: 0!important;
    		display: block;
    		width: 100%;
    		background-color: #fff;
    		border:1px #DFE0E4 solid;
    		border-bottom-color: #D0D1D5!important;
    		border-radius: 3px;
    		overflow:hidden;
    	}
    	.profileImageUpload{
    		position: absolute;
    		top: 0;
    		right: 0;
    		margin: 0;
    		opacity: 0;
    		-ms-filter: 'alpha(opacity=0)';
    		direction: ltr;
			cursor: pointer;
			font-size: 200px;
    	}
    	#movie-upLoadProfileImage{
			position: absolute;
			top: 0;
			cursor: move;
			z-index: 5;
			border-radius:4px;
		}
		.alert{
			width:90%;
			position: fixed;
			z-index: 1300;
			left: 5%;
			top:-55px;
			display:none;
		}
		.pane { background-color: #f5f5f5!important; }
		.ion-ios7-arrow-forward { color:#888; }
		.ion-arrow-left-c { color:#017AFC!important; }
		.update-btn { border:0!important; color:#017AFC!important; }
		.scroll-content{ padding: 45px 0!important; }
    </style>
    <link href="http://code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="/resources/js/jquery-1.11.0.js"></script>
	<script src="/resources/js/jquery-ui-1.10.4.custom.min.js"></script>
	<script src="/resources/js/jquery.ui.touch-punch.min.js"></script>
	<script src="http://code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
	<script type="text/javascript">
	var account_id = "${userDto.id}";
	var account_email = "${userDto.email}";
	var account_country = "${userDto.country}";
	
	var profile_name = "${userDto.name}";
	var profile_gender = "${userDto.gender}";
	var profile_location = "${userDto.location}";
	var profile_website = "${userDto.website}";
	var profile_description = "${userDto.description}";
	var profile_link_facebook = "${userDto.link_facebook}";
	var profile_link_instagram = "${userDto.link_instagram}";
	var profile_link_twitter = "${userDto.link_twitter}";
	var profile_image_viewer = "${userDto.profileImage}";
	
	var privacy_follow = "${userDto.follow_accept}";
	var privacy_profile = "${userDto.privacy}";
	
	var noti_follow = "${userDto.noti_follow}";
	var noti_refer = "${userDto.noti_refer}";
	var noti_like = "${userDto.noti_like}";
	var noti_comment = "${userDto.noti_comment}";
	var noti_reply = "${userDto.noti_reply}";
	
	var noti_follow = "${userDto.noti_follow}";
	var noti_refer = "${userDto.noti_refer}";
	var noti_like = "${userDto.noti_like}";
	var noti_comment = "${userDto.noti_comment}";
	var noti_reply = "${userDto.noti_reply}";
	
	angular.module('ionicApp', ['ionic'])
		.config(function($stateProvider, $urlRouterProvider) {
			$stateProvider
				.state('tabs', {
					url: "/tab",
					abstract: true,
					templateUrl: "templates/tabs.html"
				})
				.state('tabs.home', {
					url: "/home",
					views: {
						'home-tab': {
							templateUrl: "settings/home.html"
						}
					}
				})
				.state('tabs.account', {
					url: "/account",
					views: {
						'home-tab': {
							templateUrl: "settings/account.html",
							controller: "tabAccount"
						}
					},
				})
				.state('tabs.password', {
					url: "/password",
					views: {
						'home-tab': {
							templateUrl: "settings/password.html",
							controller: "tabPasswd"
						}
					}
				})
				.state('tabs.profile', {
					url: "/profile",
					views: {
						'home-tab': {
							templateUrl: "settings/profile.html",
							controller: "tabProfile"
						}
					}
				})
				.state('tabs.privacy', {
					url: "/privacy",
					views: {
						'home-tab': {
							templateUrl: "settings/privacy.html",
							controller: "tabPrivacy"
						}
					}
				})
				.state('tabs.notifications', {
					url: "/notifications",
					views: {
						'home-tab': {
							templateUrl: "settings/notifications.html",
							controller: "tabNotifications"
						}
					}
				})
				.state('tabs.memberLeave', {
					url: "/memberLeave",
					views: {
						'home-tab': {
							templateUrl: "settings/memberLeave.html"
						}
					}
				});
			$urlRouterProvider.otherwise("/tab/home");
		})
		.controller('HomeTabCtrl', function($scope) {
			alert($scope);
		})
		.controller("tabAccount", function($scope){
			
			//account init
			$("#account_id").val(account_id).data("id",account_id);
			$("#account_email").val(account_email);
			
	   		if(account_country == "대한민국"){
	   			$("#account_country option:eq(0)").attr("selected", "selected");
	   		}else if("${userDto.country}" == "미국"){
	   			$("#account_country option:eq(1)").attr("selected", "selected");
	   		}else if("${userDto.country}" == "중국"){
	   			$("#account_country option:eq(2)").attr("selected", "selected");
	   		}else{
	   			$("#account_country option:eq(3)").attr("selected", "selected");
	   		}
	   		$("#account-form").on("input", function(){
	   			$("#account-update-btn").removeAttr("disabled","disabled");
	   		});
		})
		.controller("tabPasswd", function(){
			$("#passwd-form").on("input", function(){
	   			$("#passwd-update-btn").removeAttr("disabled","disabled");
	   		});	
		})
		.controller("tabProfile", function(){
			//profile init
			$("#profile_name").val(profile_name);
			$("#profile_gender").val(profile_gender);
			$("#profile_location").val(profile_location);
			$("#profile_website").val(profile_website);
			$("#profile_description").val(profile_description);
			$("#profile_link_facebook").val(profile_link_facebook);
			$("#profile_link_instagram").val(profile_link_instagram);
			$("#profile_link_twitter").val(profile_link_twitter);
			$("#profile_image_viewer").attr("src","/resources/upload/profile/thumbnail/"+profile_image_viewer);
			
			if(profile_gender == "female"){
	   			$("#profile_gender option:eq(0)").attr("selected", "selected");
	  		}else{
	  			$("#profile_gender option:eq(1)").attr("selected", "selected");
	  		}
			
			$("#profile-form").on("input", function(){
	   			$("#profileBtn").removeAttr("disabled","disabled");
	   		});
		})
		.controller("tabPrivacy", function(){
			//privacy init
			if(privacy_follow == "2"){
	  			$("input:radio[name='privacy_follow'][value='2']").attr("checked",true);
	  		}else{
	  			$("input:radio[name='privacy_follow'][value='0']").attr("checked",true);
	  		}
	   		if(privacy_profile == "2"){
	  			$("input:radio[name='privacy_profile'][value='2']").attr("checked",true);
	  		}else if (privacy_profile == "1"){
	  			$("input:radio[name='privacy_profile'][value='1']").attr("checked",true);
	  		}else{
	  			$("input:radio[name='privacy_profile'][value='0']").attr("checked",true);
	  		}
		})
		.controller("tabNotifications", function(){
			//notifications init
	   		if(noti_follow == 1) $("#noti_follow").attr("checked",true);
	   		if(noti_refer == 1) $("#noti_refer").attr("checked",true);
	   		if(noti_like == 1) $("#noti_like").attr("checked",true);
	   		if(noti_comment == 1) $("#noti_comment").attr("checked",true);
	   		if(noti_reply == 1) $("#noti_reply").attr("checked",true);
			
	   		$("#profile-form").on("input", function(){
	   			$("#profileBtn").removeAttr("disabled","disabled");
	   		});
		})
		.controller('AppCtrl', function($scope, $ionicActionSheet, $http, $ionicModal, $ionicPopover, $ionicNavBarDelegate) {
			$scope.goBack = function(id){
				if($ionicNavBarDelegate.getTitle() == "알림"){
					alert(document.getElementById("noti-form"));
					console.log(document.getElementById("noti-form"));
					modify(document.getElementById("noti-form"), false, "notifications");
				}
				$ionicNavBarDelegate.back();
			}
			
			$ionicModal.fromTemplateUrl('my-modal.html', {
			    scope: $scope,
			    animation: 'slide-in-up'
			  }).then(function(modal) {
			    $scope.modal = modal;
			  });
			  $scope.openModal = function() {
			    $scope.modal.show();
			  };
			  $scope.closeModal = function() {
			    $scope.modal.hide();
			  };
			  //Cleanup the modal when we're done with it!
			  $scope.$on('$destroy', function() {
			    $scope.modal.remove();
			  });
			  // Execute action on hide modal
			  $scope.$on('modal.hidden', function() {
			    // Execute action
			  });
			  // Execute action on remove modal
			  $scope.$on('modal.removed', function() {
			    // Execute action
			  });

			  
			  $ionicPopover.fromTemplateUrl('my-popover.html', {
				    scope: $scope,
				  }).then(function(popover) {
				    $scope.popover = popover;
				  });
				  $scope.openPopover = function($event) {
				    $scope.popover.show($event);
				  };
				  $scope.closePopover = function() {
				    $scope.popover.hide();
				  };
				  //Cleanup the popover when we're done with it!
				  $scope.$on('$destroy', function() {
				    $scope.popover.remove();
				  });
				  // Execute action on hide popover
				  $scope.$on('popover.hidden', function() {
				    // Execute action
				  });
				  // Execute action on remove popover
				  $scope.$on('popover.removed', function() {
				    // Execute action
				  });

			
  $scope.showActionsheet = function() {
    $ionicActionSheet.show({
      buttons: [
        { text: 'Share <i class="icon ion-share"></i>' },
        { text: 'Move <i class="icon ion-arrow-move"></i>' },
      ],
      destructiveText: 'Delete',
      cancelText: 'Cancel',
      cancel: function() {
        console.log('CANCELLED');
      },
      buttonClicked: function(index) {
        console.log('BUTTON CLICKED', index);
        return true;
      },
      destructiveButtonClicked: function() {
        console.log('DESTRUCT');
        return true;
      }
    });
  };
  $scope.items = [1,2,3];
  $scope.doRefresh = function() {
    $http.get('/new-items').success(function(newItems) {
       $scope.items = newItems;
    }).finally(function() {
       // Stop the ion-refresher from spinning
       $scope.$broadcast('scroll.refreshComplete');
     });
  };


});


	
    function profileImageUpload(input){
  		var fileList = input.files;
  		try{
      		var anyWindow = window.URL || window.webkitURL;
      		var objectUrl = anyWindow.createObjectURL(fileList[0]);
      		$("#movie-upLoadProfileImage").attr("src", objectUrl).show()
    		.load(function(){
    			if($(this).height() < 180){
    				$(this).css("height", 180);
    			}
    		});
      		$("#profileBtn").removeAttr("disabled");
      		$("#displayProfileImage").attr("src", objectUrl);
      		$("#profile_image_viewer").attr("src", objectUrl);
      		$("#fb_profileImage").val("");
  		}catch(e){
  			alertShow("danger", "현재 이용중인 인터넷브라우저로는 이미지를 업로드 할 수 없습니다.&nbsp;<a style='color:#401A19;' href='/help?'>자세히 알아보기</a>", null);
  		}
        
  	}
   	
   	// 숫자만 입력 가능하도록
	function onlyNumber(event) {
	    var key = window.event ? event.keyCode : event.which;    
	    if ((event.shiftKey == false) && ((key  > 47 && key  < 58) || (key  > 95 && key  < 106)
	    || key  == 35 || key  == 36 || key  == 37 || key  == 39  // 방향키 좌우,home,end  
	    || key  == 8  || key  == 46 )
	    ) {
	        return true;
	    }else {
	        return false;
	    }    
	};
   	
   	function memberLeave(){
   		if(confirm('정말로 탈퇴 하시겠습니까?')){
   			$.ajax({
			    type : "get"
			    , url : "/memberLeave"
			    , dataType : "text"
			    , timeout : 5000
			    , error : function() {
			    	alertShow("danger","다시 시도해 주세요", 2000);
			    }
			    , success : function(response) {
			    	if(response == "execute"){
			    		location.href="/logout";
			    	}else{
			    		alertShow("danger","다시 시도해 주세요", 2000);
			    	}
			    }
			});
   		}
   	}
   	
   	function checkId(id){
   		var result = "";
		if(id.length < 4){
			result = "length";
		}else{
			var data = "id="+id;
			$.ajax({
			    type : "get"
			    , url : "/checkId"
			    , data : data
			    , dataType : "text"
			    , async: false
			    , timeout : 5000
			    , error : function(request, status, error) {
			    	
			    }
			    , success : function(response) {
			    	if(response == "true"){
			    		result = "true";
			    	}else{
			    		result = "false";
			    	}
			    }
			});
		}
		return result;
	}
   	
   	function passwdCheck(value){
   		if($("#passwd_new").val() != value){
   			$("#passwdBtn").attr("disabled","disabled");
   			alert("비밀번호를 확인해 주세요");
   		}else{
   			$("#passwdBtn").removeAttr("disabled","disabled");
   		}
   	}
   	
   	function emailCheck(email){
   		eCheck=/^[_a-zA-Z0-9]+([-+.][_a-zA-Z0-9]+)*@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/i;
   		if(eCheck.test(email)){
   			$("#accountBtn").removeAttr("disabled","disabled");
   			$("#account_email").next().empty();
   		}else{
   			$("#accountBtn").attr("disabled","disabled");
   			$("#account_email").next().html("올바른 이메일을 입력해주세요");
   		}
   	}
   	
   	function modify(form,obj, type){
   		var data = $(form).serialize()+"&type="+type;
   		alert(data);
   		if(type=="account"){
   			if($("#account_id").val() != $("#account_id").data("id")){
   				var result = checkId($("#account_id").val());
   	   			if(result == "length"){
   	   				alertShow("danger", "아이디를 4글자 이상으로 해주세요", 2000);
   	   				return false;
   	   			}else if(result == "false"){
   	   				alertShow("danger", "이미 존재하는 아이디 입니다", 2000);
   	   				return false;
   	   			}
   			}
   			eCheck=/^[_a-zA-Z0-9]+([-+.][_a-zA-Z0-9]+)*@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$/i;
   	   		if(!eCheck.test($("#account_email").val())){
   	   			alertShow("danger", "올바른 형식의 이메일을 입력해주세요", 2000);
   	   			return false;
   	   		}
   		}
   		$.ajax({
		    type : "post"
		    , url : "/modifyAccounts"
		    , data : data
		    , dataType : "text"
		    , timeout : 5000
		    , error : function(request, status, error) {
		    	alertShow("danger", "다시 시도해 주세요", 2000);
		    }
		    , success : function(response) {
		    	alert(response);
		    	if(response == "execute"){
		    		alertShow("success", "변경되었습니다", 2000);
		    		$(obj).attr("disabled", "disabled").html("저장");
		    		if(type=="account"){
		       			if($("#account_id").val() != $("#account_id").data("id")){
		       				$("#account_id").data("id", $("#account_id").val());
		       			}
		    		}
		    		/** init **/
			    	if(type=="account"){
			    		account_id = $("#account_id").val();
			    		$("#account_id").data("id", $("#account_id").val());
			    		account_email = $("#account_email").val();
			    		account_country = $("#account_country").val();
			    	}else if(type=="privacy"){
			    		privacy_follow = $("#privacy_follow:checked").val();
			    		privacy_profile = $("#privacy_profile:checked").val();
			    	}else if(type=="notifications"){
			    		if($("#noti_follow").is(":checked")){
			    			noti_follow = 1;
			    		}else{
			    			noti_follow = "";
			    		}
			    		if($("#noti_refer").is(":checked")){
			    			noti_refer = 1;
			    		}else{
			    			noti_refer = "";
			    		}
			    		if($("#noti_like").is(":checked")){
			    			noti_like = 1;
			    		}else{
			    			noti_like = "";
			    		}
			    		if($("#noti_comment").is(":checked")){
			    			noti_comment = 1;
			    		}else{
			    			noti_comment = "";
			    		}
			    		if($("#noti_reply").is(":checked")){
			    			noti_reply = 1;
			    		}else{
			    			noti_reply = "";
			    		}
			    	}
		    	}else if(response == "passwd"){
		    		alertShow("danger", "현재 비밀번호가 일치하지 않습니다", 2000);
		    		$(obj).removeAttr("disabled", "disabled").html("저장");
		    	}else{
		    		alertShow("danger", "로그인을 다시 해주세요", 2000);
		    		$(obj).removeAttr("disabled", "disabled").html("저장");
		    	}
		    }
		    , beforeSend: function() {
		    	$(obj).attr("disabled", "disabled").html("변경중...");
		    }
		});
   	}
   	
   	$(document).ready(function(){
   		
   		$("#movie-upLoadProfileImage").draggable({
    		scroll: false,
    		axis : "y",
    		drag : function(event, ui){
    			var h = $("#movie-upLoadProfileImage").height();
    			if(ui.position.top >= 0){
    				ui.position.top = 0;
    			}else if(ui.position.top <= 180 - h){
    				ui.position.top = 180 - h;
    			}
    		},
    		stop : function(){
    			$("#profile_imageTop").val($("#movie-upLoadProfileImage").position().top);
    		}
    	});
   		
   	}); // end document
   	
   	// 프로필탭 저장
   	function profileSave() {
   		$("#profile_description").val($("#profile_description").val().replace("\n", " "));
		$.getScript('/resources/js/jquery.form.js', function(){
    		$("#profile-form").ajaxSubmit({
    			statusCode: { 400: function() {
    					alertShow("danger", "다시 시도해 주세요", 2000);
    					$("#profileBtn").removeAttr("disabled", "disabled").html("저장");
    				},
    				500: function() {
    					alertShow("danger", "다시 시도해 주세요", 2000);
    					$("#profileBtn").removeAttr("disabled", "disabled").html("저장");
    				}
    			},
    			beforeSubmit: function() { 
    				$("#profileBtn").attr("disabled", "disabled").html("변경중...");
    			},
    			success: function(data) {
    				alertShow("success", "변경되었습니다", 2000);
		    		$("#profileBtn").attr("disabled", "disabled").html("저장");
		    		$("#movie-upLoadProfileImage").hide();
		    		
		    		/** init **/
		    		profile_name = $("#profile_name").val();
		    		profile_gender = $("#profile_gender").val();
		    		profile_location = $("#profile_location").val();
		    		profile_website = $("#profile_website").val();
		    		profile_description = $("#profile_description").val();
		    		profile_link_facebook = $("#profile_link_facebook").val();
		    		profile_link_instagram = $("#profile_link_instagram").val();
		    		profile_link_twitter = $("#profile_link_twitter").val();
		    		profile_image_viewer = $("#profile_image_viewer").attr("src");
    			}
    		});
		});
   	}
   	
   	// 페이스북 프로필 사진 가져오기
   	function getFbProfileImg(){
   		$("#movie-upLoadProfileImage").attr("src", "https://graph.facebook.com/${userDto.appIdx}/picture?redirect=true&width=9999&height=9999");
   		$("#fb_profileImage").val("https://graph.facebook.com/${userDto.appIdx}/picture?redirect=true&width=9999&height=9999");
   		$("#profileBtn").removeAttr("disabled", "disabled");
   		$("#profile_image_viewer").attr("src", "https://graph.facebook.com/${userDto.appIdx}/picture?redirect=true&width=9999&height=9999");
   	}
   	
   	function alertShow(type, message, dealy){
		var $el = $("<div class='alert alert-"+type+"'><button type='button' onclick='alertHide(this)' class='close'>×</button><strong>"+message+"</strong></div>");
		$("body").append($el);
		if(dealy != null){
			setTimeout(function(){$el.addClass("in");},100);
			setTimeout(function(){$el.removeClass("in");setTimeout(function(){$el.remove();},300);}, dealy);
		}
	}
	function alertHide(el){
		var $el = $(el).parent();
		$el.removeClass("in");
		setTimeout(function(){$el.remove();},300);
	}
</script>
</head>
<body ng-controller="AppCtrl">
<ion-nav-bar class="nav-title-slide-ios7 bar-light">
	<ion-nav-back-button class="button-icon ion-arrow-left-c" ng-click="goBack()"> 설정
	</ion-nav-back-button>
</ion-nav-bar>
             
<ion-nav-view animation="slide-left-right-ios7"></ion-nav-view>

<script id="templates/tabs.html" type="text/ng-template">
      <ion-tabs class="tabs-positive tabs-icon-only">

        <ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="2" badge-style="tabs-positive">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="About" icon="ion-ios7-information" href="#/tab/about">
          <ion-nav-view name="about-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Contact" icon="ion-ios7-world" ui-sref="tabs.contact">
          <ion-nav-view name="contact-tab"></ion-nav-view>
        </ion-tab>

      </ion-tabs>
    </script>
    
    <script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
	<button ng-click="closeModal()">닫기</button>
    </ion-content>
  </ion-modal-view>
</script>
    
    
    <script id="my-popover.html" type="text/ng-template">
  <ion-popover-view>
    <ion-header-bar>
      <h1 class="title">My Popover Title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-popover-view>
</script>
<script id="settings/home.html" type="text/ng-template">
	<ion-view title="설정">
		<ion-content>
			<ion-refresher
    pulling-text="Pull to refresh..."
    on-refresh="doRefresh()">
  </ion-refresher>
			<button class="button" ng-click="openModal()">
        		Show Modal
      		</button>
			<button class="button" ng-click="showActionsheet()">
        		Show Actionsheet
      		</button>
			<button class="button" ng-click="openPopover($event)">
				Open Popover
			</button>
			<div class="list">
				<a class="item item-icon-left item-icon-right" href="#/tab/account">
					<i class="icon ion-person"></i>
					계정
					<i class="icon ion-ios7-arrow-forward"></i>
				</a>
				<c:if test="${userDto.loginApp  eq 'default'}">
				<a class="item item-icon-left item-icon-right" href="#/tab/password">
					<i class="icon ion-ios7-locked"></i>
					비밀번호
					<i class="icon ion-ios7-arrow-forward"></i>
				</a>
				</c:if>
				<a class="item item-icon-left item-icon-right" href="#/tab/profile">
					<i class="icon ion-ios7-compose"></i>
					프로필
					<i class="icon ion-ios7-arrow-forward"></i>
				</a>
				<a class="item item-icon-left item-icon-right" href="#/tab/privacy">
					<i class="icon ion-ios7-settings"></i>
					공개범위
					<i class="icon ion-ios7-arrow-forward"></i>
				</a>
				<a class="item item-icon-left item-icon-right" href="#/tab/notifications">
					<i class="icon ion-ios7-bell"></i>
					알림
					<i class="icon ion-ios7-arrow-forward"></i>
				</a>
				<a class="item item-icon-left item-icon-right" href="#/tab/memberLeave">
					<i class="icon ion-ios7-close"></i>
					회원탈퇴
					<i class="icon ion-ios7-arrow-forward"></i>
				</a>
			</div>
		</ion-content>
	</ion-view>
</script>

<script id="settings/account.html" type="text/ng-template">
	<ion-view title="계정">
		<ion-content>
			<form id="account-form">
			<ion-nav-buttons side="right">
				<button class="button update-btn" id="account-update-btn" onclick="modify(document.getElementById('account-form'), this, 'account')" disabled="disabled">
					저장
				</button>
			</ion-nav-buttons>
			<div class="list">
				<label class="item item-input">
					<input type="text" placeholder="아이디" data-id="" value="" id="account_id" name="account_id">
				</label>
				<label class="item item-input">
					<input type="text" placeholder="이메일" value="${userDto.email}" id="account_email" name="account_email">
				</label>
				<label class="item item-input item-select">
					<div class="input-label">
						국가
					</div>
					<select id="account_country" name="account_country">
						<option value="대한민국">대한민국</option>
						<option value="미국">미국</option>
						<option value="중국">중국</option>
						<option value="일본">일본</option>
					</select>
				</label>
				<div style="height:45px;display:block;background-color:#f5f5f5;"></div>
				<label class="item">
					가입날짜
					<span class="item-note">
						${fn:substring(userDto.joindate,0,10)}
					</span>
				</label>
				<label class="item">
					마지막으로 접속한 날짜
					<span class="item-note">
						${fn:substring(userDto.last_access,0,16)}
					</span>
				</label>
				<label class="item">
					접속횟수
					<span class="item-note">
						${userDto.access_count+1}회
					</span>
				</label>
			</div>
			</form>
		</ion-content>
	</ion-view>
</script>

<script id="settings/password.html" type="text/ng-template">
	<ion-view title="비밀번호">
		<ion-content>
			<form id="passwd-form">	
			<ion-nav-buttons side="right">
				<button class="button update-btn" id="passwd-update-btn" onclick="modify(document.getElementById('passwd-form'), this, 'passwd')">
					저장
				</button>
			</ion-nav-buttons>
			<div class="list">
				<label class="item item-input">
					<input type="password" id="passwd_currently" name="passwd_currently" placeholder="현재 비밀번호">
				</label>
				<label class="item item-input">
					<input type="password" id="passwd_new" name="passwd_new" placeholder="새 비밀번호">
				</label>
				<label class="item item-input">
					<input type="password" id="passwd_check" name="passwd_check" onblur="passwdCheck(this.value)" placeholder="비밀번호 확인">
				</label>
			</div>
			</form>
		</ion-content>
	</ion-view>
</script>

<script id="settings/profile.html" type="text/ng-template">
	<ion-view title="프로필">
		<ion-content>
			<ion-nav-buttons side="right">
				<button class="button update-btn" onclick="profileSave()" id="profileBtn" disabled="disabled">
					저장
				</button>
			</ion-nav-buttons>
			<form action="/modifyAccounts" id="profile-form" method="post" enctype="multipart/form-data">
			<input type="hidden" id="type" name="type" value="profile">
			<div class="list">
				<label class="item item-input">
					<div class="input-label">
						이름
					</div>
					<input type="text" id="profile_name" name="profile_name" value="" maxLength="20" placeholder="별명 또는 실명을 입력해 주세요">
				</label>
				<label class="item item-input item-select">
					<div class="input-label">
						성별
					</div>
					<select id="profile_gender" name="profile_gender">
						<option value="female">여자</option>
						<option value="male">남자</option>
					</select>
				</label>
				<label class="item item-input">
					<div class="input-label">
						위치
					</div>
					<input type="text" id="profile_location" name="profile_location" value="" maxLength="20" placeholder="현재 살고있는 도시를 입력해 주세요">
				</label>
				<label class="item item-input">
					<div class="input-label">
						웹사이트
					</div>
					<input type="text" id="profile_website" name="profile_website" value="" placeholder="웹사이트나 블로그 주소를 입력해 주세요">
				</label>
				<label class="item item-input">
					<textarea rows="4" placeholder="120자 이내로 자신을 소개하세요" maxlength="120" id="profile_description" name="profile_description"></textarea>
				</label>
				<div style="padding:35px 0 6px 12px;display:block;background-color:#f5f5f5;font-weight:bold;font-size:15px;">SNS 링크</div>
				<label class="item item-input">
					<div class="input-label" style="width:45px;">
						<img src="/resources/img/icon/share-facebook-icon.png" width="18" height="18">
					</div>
					<input type="text" id="profile_link_facebook" name="profile_link_facebook" value="" placeholder="페이스북 아이디를 입력해 주세요">
				</label>
				<label class="item item-input">
					<div class="input-label" style="width:45px;">
						<img src="/resources/img/instagram-icon.png" width="18" height="18">
					</div>
					<input type="text" id="profile_link_instagram" name="profile_link_instagram" value="" placeholder="인스타그램 아이디를 입력해 주세요">
				</label>
				<label class="item item-input">
					<div class="input-label" style="width:45px;">
						<img src="/resources/img/icon/share-twitter-icon.png" width="18" height="18">
					</div>
					<input type="text" id="profile_link_twitter" name="profile_link_twitter" value="" placeholder="트위터 아이디를 입력해 주세요">
				</label>
				<div style="padding:35px 0 6px 12px;display:block;background-color:#f5f5f5;font-weight:bold;font-size:15px;">프로필 사진</div>
				<div style="padding:12px 12px;background-color:#fff;border-top:1px solid #ddd; border-bottom:1px solid #ddd;">
					<div>
						<div style="width:180px;height:180px;border:7px solid #fff;border-radius:11px;background-color:#fff;box-shadow: 1px 0px 3px rgba(0,0,0,0.2);position: relative;overflow: hidden;">
							<img src="" style="width:180px; height: 180px; border-radius:4px;" id="profile_image_viewer">
							<input type="file" onchange="profileImageUpload(this)" id="profile_image" name="profile_image" accept="image/*" class="profileImageUpload" >
							<input type="hidden" id="profile_imageTop" name="profile_imageTop" value="0">
							<img style="width: 180px; height: auto;" id="movie-upLoadProfileImage" src="">
						</div>
						<c:if test="${userDto.loginApp eq 'fb'}">
							<input type="hidden" id="fb_profileImage" name="fb_profileImage" value="none">
							<button type="button" class="btn btn-facebook" onclick="getFbProfileImg()" title="페이스북 사진 가져오기" style="position: relative; width: 190px; margin-top:10px;"><span style="position: absolute; left:15px; top:7px;"><i class="fa fa-facebook fa-lg"></i></span>&nbsp;페이스북 사진가져오기</button>
						</c:if>
					</div>
				</div>
			</div>
			</form>
		</ion-content>
	</ion-view>
</script>

<script id="settings/privacy.html" type="text/ng-template">
	<ion-view title="공개범위">
		<ion-content>
			<ion-nav-buttons side="right">
				<button class="button update-btn" id="privacy-update-btn" onclick="modify(document.getElementById('privacy-form'), this, 'privacy')">
					저장
				</button>
			</ion-nav-buttons>
			<form id="privacy-form">
			<div class="list">
				<div style="padding:0 0 15px 12px;display:block;background-color:#f5f5f5;font-weight:bold;font-size:15px;">나를 팔로우하는 사람</div>
				<label class="item item-radio">
					<input type="radio" name="privacy_follow" id="privacy_follow" value="2">
						<div class="item-content">
							누구나
						</div>
					<i class="radio-icon ion-checkmark"></i>
				</label>
				<label class="item item-radio">
					<input type="radio" name="privacy_follow" id="privacy_follow" value="0">
						<div class="item-content">
							받지않음
						</div>
					<i class="radio-icon ion-checkmark"></i>
				</label>
				<div style="padding:35px 0 6px 12px;display:block;background-color:#f5f5f5;font-weight:bold;font-size:15px;">내 프로필을 볼 수 있는 사람</div>
				<label class="item item-radio">
					<input type="radio" name="privacy_profile" id="privacy_profile" value="2">
						<div class="item-content">
							누구나
						</div>
					<i class="radio-icon ion-checkmark"></i>
				</label>
				<label class="item item-radio">
					<input type="radio" name="privacy_profile" id="privacy_profile" value="1">
						<div class="item-content">
							팔로워만
						</div>
					<i class="radio-icon ion-checkmark"></i>
				</label>
				<label class="item item-radio">
					<input type="radio" name="privacy_profile" id="privacy_profile" value="0">
						<div class="item-content">
							모두 비공개
						</div>
					<i class="radio-icon ion-checkmark"></i>
				</label>
			</div>
			</form>
		</ion-content>
	</ion-view>
</script>

<script id="settings/notifications.html" type="text/ng-template">
	<ion-view title="알림">
		<ion-content>
			<form id="noti-form">
			<ul class="list">
				<li style="padding:0 0 15px 12px;display:block;background-color:#f5f5f5;font-weight:bold;font-size:15px;">받을 알림 선택</li>
				<li class="item item-toggle">
     				누군가가 나를 팔로우할때
					<label class="toggle toggle-balanced">
					<input type="checkbox" id="noti_follow" name="noti_follow" value="1">
						<div class="track"><div class="handle"></div></div>
					</label>
				</li>
				<li class="item item-toggle">
     				누군가가 나를 언급했을때
					<label class="toggle toggle-balanced">
					<input type="checkbox" id="noti_refer" name="noti_refer" value="1">
						<div class="track"><div class="handle"></div></div>
					</label>
				</li>
				<li class="item item-toggle">
     				내 게시물에 좋아요 눌렀을때
					<label class="toggle toggle-balanced">
					<input type="checkbox" id="noti_like" name="noti_like" value="1">
						<div class="track"><div class="handle"></div></div>
					</label>
				</li>
				<li class="item item-toggle">
     				내 게시물에 댓글을 달았을때
					<label class="toggle toggle-balanced">
					<input type="checkbox" id="noti_comment" name="noti_comment" value="1">
						<div class="track"><div class="handle"></div></div>
					</label>
				</li>
				<li class="item item-toggle">
     				내 댓글에 답변을 달아줬을때
					<label class="toggle toggle-balanced">
					<input type="checkbox" id="noti_reply" name="noti_reply" value="1">
						<div class="track"><div class="handle"></div></div>
					</label>
				</li>
			</ul>
			</form>
		</ion-content>
	</ion-view>
</script>

<script id="settings/memberLeave.html" type="text/ng-template">
	<ion-view title="회원탈퇴">
		<ion-content>
			<div style="background-color:#fff;padding:25px 8px;">
				<p>Faeple에서 회원님의 계정을 영구히 삭제합니다</p>
				<abbr title="Faeple에서 회원님의 데이터가 영구히 삭제되는 항목" class="text-warning">삭제되는 항목 :</abbr>
				<ul style="margin-top:10px; padding-left:30px;">
					<li>회원님의 이름</li>
					<li>회원님의 이메일</li>
					<li>모든 개인정보가 삭제됩니다</li>
				</ul>
				<br>
				<abbr title="Faeple에서 회원님의 데이터가 보관되는 항목" class="text-warning">삭제되지 않는 항목 :</abbr>
				<ul style="margin-top:10px; padding-left:30px;">
					<li>로그 기록</li>
				</ul>
				<br>
				<p class="text-danger"><strong>회원탈퇴시 계정은 영구히 삭제되며, 복구할 수 없습니다.</strong></p>
			<button type="button" style="width:100%;background-color:#d43f3a;text-align:center;color:#fff;padding:8px 0;border:0;" title="탈퇴하기">탈퇴하기</button>
			</div>
		</ion-content>
	</ion-view>
</script>

<%-- <div id="page">
	<!-- 1차메뉴 -->
   	<div id="list-page" style="padding-top: 44px;">
   		<div class="header">
			<button onclick="history.back();" class="left-btn"><i class="fa fa-chevron-left" style="font-size:16px;"></i></button>
			<h1 class="title">설정</h1>
		</div>
		<ul class="list-menu">
			<li onclick="pageSlide('account');"><i class="glyphicon glyphicon-user"></i>&nbsp;계정<i class="icon ion-ios7-arrow-forward arrow-right"></i></li>
			<c:if test="${userDto.loginApp  eq 'default'}">
				<li onclick="pageSlide('password');"><i class="glyphicon glyphicon-lock" style="color:#FDBD3B"></i>&nbsp;비밀번호<i class="icon ion-ios7-arrow-forward arrow-right"></i></li>
			</c:if>
			<li onclick="pageSlide('profile');"><i class="fa fa-edit"></i>&nbsp;프로필<i class="icon ion-ios7-arrow-forward arrow-right"></i></li>
			<li onclick="pageSlide('privacy');"><i class="fa fa-check-square" style="color:#FDBD3B"></i>&nbsp;공개 범위<i class="icon ion-ios7-arrow-forward arrow-right"></i></li>
			<li onclick="pageSlide('notifications');"><i class="fa fa-bell" style="color:#FF8000"></i>&nbsp;알림<i class="icon ion-ios7-arrow-forward arrow-right"></i></li>
			<li onclick="pageSlide('memberLeave');"><i class="glyphicon glyphicon-minus-sign" style="color:#BF0000;"></i>&nbsp;회원탈퇴<i class="icon ion-ios7-arrow-forward arrow-right"></i></li>
		</ul>
	</div>
	
   	<!-- 계정 -->
	<div id="account" class="subLayout">
		<div class="header">
			<button onclick="pageBack('account');" class="left-btn"><i class="fa fa-chevron-left" style="font-size:16px;"></i> 설정</button>
			<h1 class="title">계정</h1>
			<button type="button" class="right-btn" disabled="disabled" id="account-update-btn" onclick="modify(document.getElementById('account-form'), this, 'account')">저장</button>
		</div>
		<form id="account-form">
		<ul class="list-menu">
			<li>아이디<input type="text" class="input-value" value="${userDto.id}" id="account_id" name="account_id"></li>
			<li>이메일<input type="text" class="input-value" value="${userDto.email}" id="account_email" name="account_email"></li>
			<li>
				<label for="country" style="width:100%;font-weight:normal;">
					<span style="max-width:200px;width:35%;">국가</span>
					<select id="account_country" name="account_country" style="position:absolute;right:0;padding-right:25px;border:0;max-width:65%;text-indent:.01px;white-space:nowrap;direction:rtl;-webkit-appearance:none;appearance:none;text-overflow:'';">
						<option value="대한민국">대한민국</option>
						<option value="미국">미국</option>
						<option value="중국">중국</option>
						<option value="일본">일본</option>
					</select>
					<i class="caret" style="position: absolute; right:7px;color:#666;font-size:17px;top:40%;"></i>
				</label>
			</li>
			<li style="margin-top:40px;">가입날짜<span class="value-empty-right">${fn:substring(userDto.joindate,0,10)}</span></li>
			<li>마지막으로 접속한 날짜<span class="value-empty-right">${fn:substring(userDto.last_access,0,16)}</span></li>
			<li>접속횟수<span class="value-empty-right">${userDto.access_count+1}회</span></li>
		</ul>
		</form>
	</div>
	
	<!-- 비밀번호 -->
	<c:if test="${userDto.loginApp  eq 'default'}">
	<div id="password" class="subLayout">
		<div class="header">
			<button onclick="pageBack('password');" class="left-btn"><i class="fa fa-chevron-left" style="font-size:16px;"></i> 계정</button>
			<h1 class="title">비밀번호</h1>
			<button type="button" class="right-btn" disabled="disabled" id="passwd-update-btn" onclick="modify(document.getElementById('passwd-form'), this, 'passwd')">저장</button>
		</div>
		<form id="passwd-form">
		<ul class="list-menu">
			<li><label for="" style="width:100%;">현재 비밀번호<br><input type="password" placeholder="현재 비밀번호를 입력해 주세요" style="border:0;padding:4px 0;background-color:#fff;width:100%;font-weight:normal;"></label></li>
			<li><label style="width:100%;">새 비밀번호<br><input type="password" placeholder="새 비밀번호를 입력해 주세요" style="border:0;padding:4px 0;background-color:#fff;width:100%;font-weight:normal;"></label></li>
			<li><label style="width:100%;">비밀번호 확인<br><input type="password" placeholder="새 비밀번호를 재입력 해주세요" style="border:0;padding:4px 0;background-color:#fff;width:100%;font-weight:normal;"></label></li>
		</ul>
		</form>
	</div>
	</c:if>
   			
	<!-- 프로필 -->
	<div id="profile" class="subLayout">
		<div class="header">
			<button onclick="pageBack('profile');" class="left-btn"><i class="fa fa-chevron-left" style="font-size:16px;"></i> 설정</button>
			<h1 class="title">프로필</h1>
			<button type="button" class="right-btn" disabled="disabled" onclick="profileSave()" id="profileBtn">저장</button>
		</div>
		<form action="/modifyAccounts" id="profile-form" method="post" enctype="multipart/form-data">
		<input type="hidden" id="type" name="type" value="profile">
		<ul class="list-menu">
			<li>이름<input type="text" id="profile_name" name="profile_name" class="input-value" value="${userDto.name}" style="margin-left:50px;" placeholder="별명 또는 실명을 입력해 주세요"></li>
			<li>
				<label for="profile_gender" style="width:100%;font-weight:normal;">
					<span style="max-width:200px;width:35%;">성별</span>
					<select id="profile_gender" style="position:absolute;right:0;padding-right:25px;border:0;max-width:65%;text-indent:.01px;white-space:nowrap;direction:rtl;-webkit-appearance:none;appearance:none;text-overflow:'';">
						<option value="female">여자</option>
						<option value="male">남자</option>
					</select>
					<i class="caret" style="position: absolute; right:7px;color:#666;font-size:17px;top:40%;"></i>
				</label>
			</li>
			<li>위치<input type="text" id="profile_location" name="profile_location" placeholder="현재 살고있는 도시를 입력해 주세요" class="input-value" value="${userDto.location}" style="margin-left:50px;"></li>
			<li>웹사이트<input type="text" id="profile_website" name="profile_website" placeholder="웹사이트나 블로그 주소를 입력해 주세요" class="input-value" value="${userDto.website}"></li>
			<li><textarea style="border:0;width:100%; height:100%;outline:none;resize:none;" rows="3" id="profile_description" name="profile_description" maxlength="120" placeholder="자기소개">${userDto.description}</textarea></li>
		</ul>
		
		<ul class="list-menu">
			<li class="list-title">SNS 링크</li>
			<li><img src="/resources/img/icon/share-facebook-icon.png" width="18" height="18"><input type="text" id="profile_link_facebook" name="profile_link_facebook" class="input-value" value="${userDto.link_facebook}" placeholder="페이스북 아이디를 입력해 주세요"></li>
			<li><img src="/resources/img/instagram-icon.png" width="18" height="18"><input id="profile_link_instagram" name="profile_link_instagram" type="text" class="input-value" value="${userDto.link_instagram}" placeholder="인스타그램 아이디를 입력해 주세요"></li>
			<li><img src="/resources/img/icon/share-twitter-icon.png" width="18" height="18"><input type="text" id="profile_link_twitter" name="profile_link_twitter" class="input-value" value="${userDto.link_twitter}" placeholder="트위터 아이디를 입력해 주세요"></li>
		</ul>
		
		<div style="padding:12px 12px;">
			<strong>사진</strong>
			<div style="margin-top:12px;">
				<div style="width:180px;height:180px;border:7px solid #fff;border-radius:11px;background-color:#fff;box-shadow: 1px 0px 3px rgba(0,0,0,0.2);position: relative;overflow: hidden;">
					<img src="/resources/upload/profile/thumbnail/${userDto.profileImage}" style="width:180px; height: 180px; border-radius:4px;" id="profile_image_viewer">
					<input type="file" onchange="profileImageUpload(this)" id="profile_image" name="profile_image" accept="image/*" class="profileImageUpload" >
					<input type="hidden" id="profile_imageTop" name="profile_imageTop" value="0">
					<img style="width: 180px; height: auto;" id="movie-upLoadProfileImage" src="">
				</div>
				<c:if test="${userDto.loginApp eq 'fb'}">
					<input type="hidden" id="fb_profileImage" name="fb_profileImage" value="none">
					<button type="button" class="btn btn-facebook" onclick="getFbProfileImg()" title="페이스북 사진 가져오기" style="position: relative; width: 190px; margin-top:10px;"><span style="position: absolute; left:15px; top:7px;"><i class="fa fa-facebook fa-lg"></i></span>&nbsp;페이스북 사진가져오기</button>
				</c:if>
			</div>
		</div>
		</form>
	</div>
    		
	<!-- 공개 범위 -->
	<div id="privacy" class="subLayout">
		<div class="header">
			<button onclick="pageBack('privacy');" class="left-btn"><i class="fa fa-chevron-left" style="font-size:16px;"></i> 설정</button>
			<h1 class="title">공개범위</h1>
			<button type="button" class="right-btn" disabled="disabled" id="privacy-update-btn" onclick="modify(document.getElementById('privacy-form'), this, 'privacy')">저장</button>
		</div>
		<form id="privacy-form">
		<input type="hidden" name="privacy_follow" id="privacy_follow" value="${userDto.follow_accept}">
		<input type="hidden" name="privacy_profile" id="privacy_profile" value="${userDto.privacy}">
		<ul class="list-menu" style="border-top: 0;" id="follow-select">
			<li class="list-title">나를 팔로우 하는 사람</li>
			<li onclick="radioCheck(this,'privacy_follow',2)">누구나<i class="fa fa-check radio-check"></i></li>
			<li onclick="radioCheck(this,'privacy_follow',0)">받지않음<i class="fa fa-check radio-check"></i></li>
		</ul>
		<ul class="list-menu" style="border-top: 0;margin-top:0;" id="profile-select">	
			<li class="list-title" style="margin-top:40px;">내 프로필을 볼 수 있는사람</li>
			<li onclick="radioCheck(this,'privacy_profile',2)">누구나<i class="fa fa-check radio-check"></i></li>
			<li onclick="radioCheck(this,'privacy_profile',1)">팔로워만<i class="fa fa-check radio-check"></i></li>
			<li onclick="radioCheck(this,'privacy_profile',0)">비공개<i class="fa fa-check radio-check"></i></li>
		</ul>
		</form>
	</div>
	
   			
	<!-- 알림 -->
	<div id="notifications" class="subLayout">
		<div class="header">
			<button onclick="pageBack('notifications');" class="left-btn"><i class="fa fa-chevron-left" style="font-size:16px;"></i> 설정</button>
			<h1 class="title">알림</h1>
		</div>
		<ul class="list-menu" style="border-top: 0;">
			<li class="list-title">받을 알림 선택</li>
			<li class="item-toggle">누군가가 나를 팔로우할때<label class="toggle toggle-positive"><input type="checkbox" checked><div class="track"><div class="handle"></div></div></label></li>
			<li class="item-toggle">누군가가 나를 언급했을때<label class="toggle toggle-positive"><input type="checkbox"><div class="track"><div class="handle"></div></div></label></li>
			<li class="item-toggle">내 게시물에 좋아요 눌렀을때<label class="toggle toggle-positive"><input type="checkbox"><div class="track"><div class="handle"></div></div></label></li>
			<li class="item-toggle">내 게시물에 댓글을 달았을때<label class="toggle toggle-positive"><input type="checkbox"><div class="track"><div class="handle"></div></div></label></li>
		</ul>
	</div>
	
	<!-- 회원탈퇴 -->
	<div id="memberLeave" class="subLayout">
		<div class="header">
			<button onclick="pageBack('memberLeave');" class="left-btn"><i class="fa fa-chevron-left" style="font-size:16px;"></i> 설정</button>
			<h1 class="title">회원탈퇴</h1>
		</div>
		<div style="background-color:#fff;padding:25px 8px;">
			<p>Faeple에서 회원님의 계정을 영구히 삭제합니다</p>
			<abbr title="Faeple에서 회원님의 데이터가 영구히 삭제되는 항목" class="text-warning">삭제되는 항목 :</abbr>
			<ul style="margin-top:10px; padding-left:30px;">
				<li>회원님의 이름</li>
				<li>회원님의 이메일</li>
				<li>모든 개인정보가 삭제됩니다</li>
			</ul>
			<br>
			<abbr title="Faeple에서 회원님의 데이터가 보관되는 항목" class="text-warning">삭제되지 않는 항목 :</abbr>
			<ul style="margin-top:10px; padding-left:30px;">
				<li>로그 기록</li>
			</ul>
			<br>
			<p class="text-danger"><strong>회원탈퇴시 계정은 영구히 삭제되며, 복구할 수 없습니다.</strong></p>
			<button type="button" style="width:100%;background-color:#d43f3a;text-align:center;color:#fff;padding:8px 0;border:0;" title="탈퇴하기">탈퇴하기</button>
		</div>
	</div>
	<!-- 회원탈퇴 -->
</div>

<div class="modal fade" id="memberLeave-modal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index:1100;">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<form action="/memberLeave" method="post">
				<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
			        <h4 class="modal-title">회원탈퇴</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<label for="leave-type">탈퇴하는 이유가 무엇인가요?</label>
						<select class="selectpicker show-tick" id="leave-type" name="leave-type" title="선택" data-width="100%">
							<option value="서비스 불만족">서비스 불만족</option>
							<option value="기능 부족">기능 부족</option>
							<option value="사용하기 어려움">사용하기 어려움</option>
							<option value="더이상 사용하지 않음">더이상 사용하지 않음</option>
							<option value="기타">기타</option>
						</select> 
					</div>
					<div class="form-group">
						<label for="leave-opinion">추가의견</label>
						<textarea id="leave-opinion" name="leave-opinion" class="form-control" rows="3" cols="250" style="resize:none;" maxlength="500"></textarea>
					</div>
				</div>
				<div class="modal-footer" style="border-top:0;margin-top:0;padding:0 15px 15px 15px;">
					<button type="submit" class="btn btn-primary btn-lg btn-block">탈퇴하기</button>
				</div>
			</form>
		</div>
	</div>
</div>
 --%>

</body>
</html>